<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>日报审核</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <span class="main-Clr-ft">组长审核</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <div class="pl20 pr20">
                <el-card class="mb20 cardWidth">
                    <el-form :inline="true"
                             :model="formData"
                             ref="formData"
                             class="noMarginBottom">
                        <el-form-item class="mb1">
                            <span>日期:</span>
                            <el-date-picker id="dayId"
                                            style="width:13%"
                                            v-model="dayId"
                                            type="date"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期时间"></el-date-picker>
                            <span>填写人:</span>
                            <el-select :default-active="$route.path"
                                       v-model="formData.userAll.value"
                                       id="userName"
                                       filterable
                                       clearable
                                       placeholder="请输入/请选择"
                                       prefix-icon="el-icon-search"
                                       class="h-m-select"
                                       style="width:13%">
                                <el-option v-for="item2 in formData.userAll"
                                           :label="item2.value"
                                           :value="item2"></el-option>
                            </el-select>
                            <span>审核状态:</span>
                            <el-select :default-active="$route.path"
                                       v-model="options.value"
                                       filterable
                                       clearable
                                       placeholder="请选择"
                                       class="h-m-select"
                                       style="width:9%"
                                       id="stateFlag">
                                <el-option v-for="item in options"
                                           :label="item.text"
                                           :key="item.value"
                                           :value="item.value + ' ' + item.text"></el-option>
                            </el-select>
                            <el-form-item class="mb1">
                                <el-button @click="lastOrNextDay(-1)"
                                           size="small"
                                           class="bkmgColor">前一天</el-button>
                            </el-form-item>
                            <el-form-item class="mb1">
                                <el-button type="primary"
                                           @click="nowWeek()"
                                           size="small">今天</el-button>
                            </el-form-item>
                            <el-form-item class="mb1">
                                <el-button @click="lastOrNextDay(1)"
                                           size="small"
                                           class="bkmgColor">后一天</el-button>
                            </el-form-item>
                            <el-button @click="queryAllList()"
                                       size="small"
                                       class="bkmgColor">查询</el-button>
                            <el-form-item class="mb1">
                                <el-button @click="noSubmitPersonMessage()"
                                           size="small"
                                           class="bkmgColor">提醒</el-button>
                            </el-form-item>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="mb20 cardWidth">
                    <div slot="header">
                        <span>今日工作</span>
                        <el-button type="text"
                                   style="margin-left:83%;padding: 3px 0"
                                   @click="speedupCheckbox">批量审核</el-button>
                        <el-button style="float: right; padding: 3px 0"
                                   type="text"
                                   @click="importExcel()">导出</el-button>
                    </div>
                    <el-col :span="23">
                        <el-table ref="multipleTable"
                                  height="400"
                                  border
                                  stripe
                                  :header-cell-style="getRowClass"
                                  tooltip-effect="dark"
                                  :data="dayDetail"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection"
                                             :selectable="selectable"
                                             width="40"
                                             v-model="multipleSelection"></el-table-column>
                            <el-table-column label="任务名称"
                                             prop="productName"
                                             min-width="10%"
                                             height="200"></el-table-column>
                            <el-table-column label="填写人"
                                             prop="userName"
                                             min-width="5%"
                                             height="200"></el-table-column>
                            <el-table-column label="工作内容"
                                             prop="workContent"
                                             min-width="20%"
                                             height="200"></el-table-column>
                            <el-table-column label="工时"
                                             prop="laborHour"
                                             min-width="5%"
                                             height="200"></el-table-column>
                            <el-table-column label="成果物"
                                             prop="deliverables"
                                             min-width="15%"
                                             height="200"></el-table-column>
                            <el-table-column label="状态"
                                             prop="statesFlag"
                                             min-width="5%"
                                             height="200">
                                <template scope="scope">
                                    <span v-if="scope.row.statesFlag == '2'"
                                          style="color: red">未审核</span>
                                    <span v-else>已审核</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作"
                                             min-width="5%"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button title="审核"
                                               :disabled="scope.row.statesFlag == '3'"
                                               type="text"
                                               size="small"
                                               @click="audit(scope.row, scope.$index)"
                                               icon="el-icon-circle-check-outline"></el-button>
                                    <el-button title="驳回"
                                               class="deleteButtonColor"
                                               type="text"
                                               size="small"
                                               @click="deleteRow(scope.row, scope.$index)"
                                               icon="el-icon-remove-outline"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="24">
                        <div>
                            <br />
                        </div>
                    </el-col>
                </el-card>
            </div>
            <div class="bottomLayoutBus"></div>
            <!--            <span>{{weekDetail.productWeek}}</span>-->
        </el-container>
    </div>
</template>

<script>
    import urlConfig from "../../../config/url.json";
    import Vue from "vue";
    import { Message } from "element-ui";
    Vue.component(Message.name, Message);

    let productUrl = urlConfig.productManage;
    let weekDetailUrl = urlConfig.weekDetailManage;
    let addWeekDetailUrl = urlConfig.addWeekDetailUrl;
    let sendMailUrl = urlConfig.sendMailUrl;
    //查询日报明细
    let dayDetailUrl = urlConfig.queryUrl;
    let queryListUrl = urlConfig.queryListUrl;
    let auditDetailUrl = urlConfig.auditDetailUrl;
    let deleteDetailUrl = urlConfig.deleteDetailUrl;
    let remindDetailUrl = urlConfig.remindDetailUrl;
    let batchAuditUrl = urlConfig.batchAuditUrl;
    let rejectMailList = urlConfig.rejectMailList;
    let exportExcelUrl = urlConfig.exportExcelUrl;

    export default {
        name: "",
        data() {
            return {
                dayDetail: [],
                dayId: "",
                formData: {
                    userName: "",
                    productAll: [],
                    productSelected: [],
                    projectAll: [],
                    projectSelected: [],
                    userAll: "",
                    userSelected: []
                },
                options: [
                    { value: 2, text: "未审核" },
                    { value: 3, text: "已审核" }
                ],
                show: false,
                weekSubmitCount: "",
                weekNoSubmitCount: "",
                weekNoSubmitPerson: [],
                multipleSelection: []
            };
        },
        methods: {
            addDate() {
                nowDate = new Date();
                let date = {
                    year: nowDate.getFullYear(),
                    month: nowDate.getMonth() + 1,
                    date: nowDate.getDate()
                };
                console.log(date);
                let systemDate =
                    date.year + "-" + 0 + date.month + "-" + 0 + date.date;
            },
            uuid() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },
            getRowClass({ rowIndex }) {
                if (rowIndex == 0) {
                    return "background:#2FB2B8;color: white";
                } else {
                    return "";
                }
            },
            message() {
                let that = this;
                var message = "";
                var noSubmitPerson = "";
                if (that.roleId == "10003") {
                    if (that.weekSubmitCount == "1") {
                        noSubmitPerson =
                            '<div>今日： <span class="messageStyle1">' +
                            "已提交日报" +
                            "</span></div>";
                    } else {
                        noSubmitPerson =
                            '<div>今日： <span class="messageStyle">' +
                            "还未提交日报" +
                            "</span></div>";
                    }
                    message = noSubmitPerson;
                } else {
                    message =
                        '<div>今日： 已有<span class="messageStyle1">' +
                        that.weekSubmitCount +
                        '</span>人提交日报，还有<span class="messageStyle">' +
                        that.weekNoSubmitCount +
                        "</span>人未提交日报</div>" +
                        '<div>工时未满8小时： 有<span class="messageStyle1">' +
                        that.NextSubmitCount +
                        '</span>人<span class="messageStyle">';
                }
                that.$notify({
                    title: "提醒",
                    message: message,
                    dangerouslyUseHTMLString: true,
                    offset: 50
                    // duration: 0
                });
            },
            noSubmitPersonMessage() {
                debugger;
                let that = this;
                var message = "";
                var noSubmitPerson = "";
                var notLaborHourPerson = "";

                if (that.roleId == "10003") {
                    if (that.weekSubmitCount == "1") {
                        noSubmitPerson =
                            '<div>本周周报： <span class="messageStyle1">' +
                            "已提交本周周报" +
                            "</span></div>";
                    } else {
                        notLaborHourPerson =
                            '<div>本周周报： <span class="messageStyle">' +
                            "还未提交本周周报" +
                            "</span></div>";
                    }
                    message = noSubmitPerson + notLaborHourPerson;
                } else {
                    for (var i = 0; i < that.weekNoSubmitPerson.length; i++) {
                        if (noSubmitPerson.length == 0) {
                            noSubmitPerson += that.weekNoSubmitPerson[i].value;
                        } else {
                            noSubmitPerson +=
                                ";" + that.weekNoSubmitPerson[i].value;
                        }
                    }
                    for (var k = 0; k < that.remindDetail.length; k++) {
                        if (notLaborHourPerson.length == 0) {
                            notLaborHourPerson += that.remindDetail[k].userName;
                        } else {
                            notLaborHourPerson +=
                                ";" + that.remindDetail[k].userName;
                        }
                    }
                    var weekMessage = "";
                    var notPersonMessage = "";
                    if (noSubmitPerson.length == 0) {
                        weekMessage =
                            '<div>今日已： <span class="messageStyle1">' +
                            "全部提交" +
                            "</span></div><br>";
                    } else {
                        weekMessage =
                            '<div>今日还有： <span class="messageStyle">' +
                            noSubmitPerson +
                            "</span> 未提交日报</div><br>";
                    }
                    if (that.dayDetail.length == 0) {
                        notPersonMessage =
                            '<div><span class="messageStyle1">' +
                            "没有待审核日报" +
                            "</span></div>";
                    } else if (notLaborHourPerson.length == 0) {
                        notPersonMessage =
                            '<div>今日工时 <span class="messageStyle1">' +
                            "全部达到" +
                            "</span></div>";
                    } else {
                        notPersonMessage =
                            '<div>工时未满8小时有： <span class="messageStyle">' +
                            notLaborHourPerson +
                            "</span></div>";
                    }
                    var message = weekMessage + notPersonMessage;
                }
                that.$notify({
                    title: "提醒",
                    message: message,
                    dangerouslyUseHTMLString: true,
                    offset: 50
                    // duration: 0
                });
            },
            //获取选中的值
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //取选中id
            speedupData() {
                let that = this;
                var arr = this.multipleSelection;
                let multis = [];
                for (var i = 0; i < arr.length; i++) {
                    multis.push(arr[i].id);
                    console.log(multis);
                }
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: batchAuditUrl,
                    baseURL: "/api",
                    data: {
                        idList: multis
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.queryAllList();
                            Message.success("审核成功！");
                        } else {
                            Message.error("审核失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("审核失败");
                        loading.close();
                    });
            },
            //多选
            speedupCheckbox() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        message: "请至少勾选一项，再进行操作",
                        type: "warning"
                    });
                } else {
                    this.speedupData();
                }
            },
            //设置禁用
            selectable(row, index) {
                if (row.statesFlag === "3") {
                    return false;
                } else {
                    return true;
                }
            },
            //提醒
            remind(dayId) {
                let that = this;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: remindDetailUrl,
                    baseURL: "/api",
                    data: {
                        userIdList: JSON.parse(that.STORAGE.getItem("userAll")),
                        dayId: that.dayId
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.remindDetail = response.data.data.getRemindList;
                            that.caculatePerson();
                            that.message();
                        } else {
                            Message.error("获取失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("获取失败");
                        loading.close();
                    });
            },
            caculatePerson() {
                let that = this;
                let arr1 = this.unique(that.dayDetail);
                debugger;
                that.weekNoSubmitPerson = [];
                for (var i = 0; i < that.formData.userAll.length; i++) {
                    if (arr1.length == 0) {
                        that.weekNoSubmitPerson = that.formData.userAll;
                    } else {
                        for (var j = 0; j < arr1.length; j++) {
                            if (that.formData.userAll[i].code == arr1[j].createBy) {
                                break;
                            } else {
                                if (arr1.length == j + 1) {
                                    that.weekNoSubmitPerson.push(
                                        that.formData.userAll[i]
                                    );
                                    break;
                                } else {
                                    continue;
                                }
                            }
                        }
                    }
                }
                that.weekSubmitCount = arr1.length;
                that.weekNoSubmitCount = that.formData.userAll.length - arr1.length;
                that.NextSubmitCount = that.remindDetail.length;
            },
            unique(arr) {
                const res = new Map();
                return arr.filter(
                    arr => !res.has(arr.createBy) && res.set(arr.createBy, 1)
                );
            },
            getDay() {
                let that = this;
                that.roleId = JSON.parse(that.STORAGE.getItem("roleIdList"))[0][
                    "id"
                    ];
                if (that.roleId == "10003" || that.roleId == "10004") {
                    return Message.warning("没有审核权限");
                }
            },
            audit(row) {
                let that = this;
                that.dayDetail.sel = row;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: auditDetailUrl,
                    baseURL: "/api",
                    data: {
                        userIdList: JSON.parse(that.STORAGE.getItem("userAll")),
                        row: row.id
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.queryAllList();
                            Message.success("审核成功！");
                        } else {
                            Message.error("审核失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("审核失败");
                        loading.close();
                    });
            },
            reject(row) {
                let that = this;
                var dayId = document.getElementById("dayId").value;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: rejectMailList,
                    baseURL: "/api",
                    data: {
                        row: row.id,
                        dayId: dayId
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                        } else {
                            Message.error("发送mail失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("发送mail失败");
                        loading.close();
                    });
            },
            delete(row, value) {
                let that = this;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: deleteDetailUrl,
                    baseURL: "/api",
                    data: {
                        userIdList: JSON.parse(that.STORAGE.getItem("userAll")),
                        row: row.id,
                        rejectReason: value
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.reject(row);
                            that.queryAllList();
                        } else {
                            Message.error("驳回失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("驳回失败");
                        loading.close();
                    });
            },
            deleteRow(row) {
                let that = this;
                var message = "";
                that.dayDetail.sel = row;
                this.$prompt("请输入驳回原因", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4E00-\uFFFF\x00-\xff]+$/,
                    inputErrorMessage: "请输入驳回原因",
                    inputType: "textarea"
                })
                    .then(({ value }) => {
                        this.$message({
                            type: "success",
                            dangerouslyUseHTMLString: true,
                            message:
                                '<div>已将驳回原因:<span class="messageStyle" style="white-space: pre-line">' +
                                value +
                                "</span>通过邮件发送</div>"
                        });
                        that.delete(row, value);
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消驳回"
                        });
                    });
            },
            importExcel() {
                let that = this;
                var id = JSON.parse(that.STORAGE.getItem("loginData")).id;
                var groupId = JSON.parse(that.STORAGE.getItem("groupIdList"))[0].id;
                var dayId = document.getElementById("dayId").value;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: exportExcelUrl,
                    baseURL: "/api",
                    data: {
                        id: id,
                        groupid: groupId,
                        dayid: dayId
                    },
                    responseType: "blob"
                })
                    .then(function(response) {
                        debugger;
                        let fiename = that.dayId + "日报导出.xlsx";
                        const link = document.createElement("a");
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel"
                        });
                        link.style.display = "none";
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute("download", fiename);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        loading.close();
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("获取数据失败");
                        loading.close();
                    });
            },
            queryAll(dayId) {
                let that = this;
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: dayDetailUrl,
                    baseURL: "/api",
                    data: {
                        userIdList: JSON.parse(that.STORAGE.getItem("userAll")),
                        dayId: dayId,
                        roleId: JSON.parse(that.STORAGE.getItem("roleIdList"))[0].id
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.dayDetail = response.data.data.getDayDetailList;
                            that.remind(that.dayId);
                        } else {
                            Message.error("获取数据失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("获取数据失败");
                        loading.close();
                    });
            },
            queryAllList() {
                let that = this;
                var dayId = document.getElementById("dayId").value;
                var userName = document.getElementById("userName").value;
                var stateFlag = document.getElementById("stateFlag").value;
                if (stateFlag == "未审核") {
                    stateFlag = "2";
                }
                if (stateFlag == "已审核") {
                    stateFlag = "3";
                }
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading"
                });
                that.$http({
                    method: "post",
                    url: queryListUrl,
                    baseURL: "/api",
                    data: {
                        userIdList: JSON.parse(that.STORAGE.getItem("userAll")),
                        dayId: dayId,
                        userName: userName,
                        stateFlag: stateFlag,
                        roleId: JSON.parse(that.STORAGE.getItem("roleIdList"))[0].id
                    }
                })
                    .then(function(response) {
                        if (response.data.code == 200) {
                            that.dayDetail = response.data.data.getDayDetailList;
                        } else {
                            Message.error("查询失败");
                        }
                        loading.close();
                    })
                    .catch(function(err) {
                        console.log(err);
                        Message.error("查询失败");
                        loading.close();
                    });
            },
            nowWeek() {
                let that = this;
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month;
                }
                var day = date.getDate();
                if (day < 10) {
                    day = "0" + day;
                }
                var showWeek = year + "-" + month + "-" + day;
                that.dayId = showWeek;
                that.queryAll(that.dayId);
            },
            lastOrNextDay(num) {
                let that = this;
                var showWeek = that.dayId;
                var showDayDate = new Date(showWeek);
                showDayDate.setDate(showDayDate.getDate() + num);
                var year = showDayDate.getFullYear();
                var month = showDayDate.getMonth() + 1;
                var day = showDayDate.getDate();
                var showWeek = "";
                if (month < 10 && day < 10) {
                    showWeek = year + "-" + 0 + month + "-" + 0 + day;
                }
                if (month < 10 && day >= 10) {
                    showWeek = year + "-" + 0 + month + "-" + day;
                }
                if (month >= 10 && day < 10) {
                    showWeek = year + "-" + month + "-" + 0 + day;
                }
                if (month >= 10 && day >= 10) {
                    showWeek = year + "-" + month + "-" + day;
                }
                that.dayId = showWeek;
                that.queryAll(that.dayId);
            }
        },
        mounted() {
            let that = this;
            that.getDay();
            that.nowWeek();
            // that.remind();
            that.formData.userAll = JSON.parse(that.STORAGE.getItem("userAll"));
            that.roleId = JSON.parse(that.STORAGE.getItem("roleIdList"))[0]["id"];
        }
    };
</script>

<style scoped>
    .headerCoster {
        height: 59px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .deleteButtonColor {
        color: red;
    }

    .letBorder {
        border-left: #6aabe6 solid 1px;
    }
    .def-el-input {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        width: 35%;
    }

    .cardWidth {
        width: 100%;
    }
    .el-select {
        width: 100%;
    }
    .el-table--scrollable-x .el-table__body-wrapper {
        overflow: scroll !important;
        height: 29rem !important;
    }
</style>
